<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OverType - Interactive Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, "Roboto Mono", "Noto Sans Mono", "Droid Sans Mono", "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", Courier, monospace;
            font-synthesis: none; /* no faux bold/italic width drift */
            font-variant-ligatures: none; /* keep metrics stable for code */
            background: #000;
            color: #fff;
            font-size: 14px;
            line-height: 1.6;
            min-height: 100vh;
            padding: 20px;
        }

        .hero {
            text-align: center;
            color: white;
            padding: 30px 20px 40px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .hero .tagline {
            font-size: 1rem;
            opacity: 0.7;
            margin-top: 10px;
        }

        .demo-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            padding: 20px;
        }

        @media (max-width: 968px) {
            .demo-container {
                grid-template-columns: 1fr;
            }
        }

        .demo-section {
            background: #0a0a0a;
            border: 1px solid #333;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .demo-header {
            padding: 15px 20px;
            background: #111;
            color: #fff;
            border-bottom: 1px solid #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .demo-header h2 {
            font-size: 14px;
            font-weight: normal;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.9;
        }

        .demo-controls {
            display: flex;
            gap: 8px;
        }

        .btn {
            padding: 6px 12px;
            background: transparent;
            border: 1px solid #666;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
            font-family: inherit;
        }

        .btn:hover {
            background: #fff;
            color: #000;
            border-color: #fff;
        }

        .editor-wrapper {
            height: 350px;
            position: relative;
        }

        .theme-toggle {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
            padding: 10px 15px;
            background: #4251de;
            border: 1px solid #1b257d;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-family: inherit;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.2s;
        }

        .theme-toggle:hover {
            background: #fff;
            color: #000;
            border-color: #fff;
        }

        .github-link {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #fff;
            text-decoration: none;
            opacity: 0.7;
            transition: opacity 0.2s;
            font-size: 12px;
        }

        .github-link:hover {
            opacity: 1;
        }
    </style>
</head>
<body>
    <a href="https://github.com/panphora/overtype" class="github-link">View on GitHub →</a>

    <div class="hero">
        <img src="logo-text.svg" alt="OverType" style="width: 300px; max-width: 90%; margin: 0 auto 20px; display: block;">
        <p class="tagline">Interactive Demo - Try all the features</p>
    </div>

    <div class="demo-container">
        <!-- Main Editor with Toolbar -->
        <div class="demo-section" id="multiple-instances">
            <div class="demo-header">
                <h2>Main Editor</h2>
                <div class="demo-controls">
                    <button class="btn" onclick="editors.main.getValue() && alert('Content: ' + editors.main.getValue().substring(0, 100) + '...')">Get Value</button>
                    <button class="btn" onclick="editors.main.setValue('# New Content\n\nEditor reset!')">Set Value</button>
                </div>
            </div>
            <div id="main-editor" class="editor-wrapper"></div>
        </div>

        <!-- Preview Editor -->
        <div class="demo-section" id="view-modes">
            <div class="demo-header">
                <h2>Live Preview</h2>
                <div class="demo-controls">
                    <button class="btn" onclick="syncWithMain()">Sync with Main</button>
                </div>
            </div>
            <div id="preview-editor" class="editor-wrapper"></div>
        </div>

        <!-- Notes Editor -->
        <div class="demo-section">
            <div class="demo-header">
                <h2>Notes</h2>
                <div class="demo-controls">
                    <button class="btn" onclick="editors.notes.setValue('')">Clear</button>
                </div>
            </div>
            <div id="notes-editor" class="editor-wrapper"></div>
        </div>

        <!-- Code Editor -->
        <div class="demo-section" id="markdown-features">
            <div class="demo-header">
                <h2>Code Editor</h2>
            </div>
            <div id="code-editor" class="editor-wrapper"></div>
        </div>
        <!-- Web Component Editor -->
        <div class="demo-section">
            <div class="demo-header">
                <h2>Web Component</h2>
                <div class="demo-controls">
                    <button class="btn" onclick="wcUpdateContent()">Update</button>
                    <button class="btn" onclick="wcGetValue()">Get Value</button>
                    <button class="btn" onclick="wcFocus()">Focus</button>
                </div>
            </div>
            <div style="padding: 10px; background: #0a0a0a;">
                <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: center;">
                    <label>Theme:
                        <select id="wc-theme-select" onchange="wcChangeTheme()" style="background:#111; color:#fff; border:1px solid #333; padding:4px;">
                            <option value="solar">solar</option>
                            <option value="cave">cave</option>
                        </select>
                    </label>
                    <label>Height:
                        <select id="wc-height-select" onchange="wcChangeHeight()" style="background:#111; color:#fff; border:1px solid #333; padding:4px;">
                            <option value="200px">200px</option>
                            <option value="300px">300px</option>
                            <option value="400px">400px</option>
                        </select>
                    </label>
                    <label>Font Size:
                        <select id="wc-fontsize-select" onchange="wcChangeFontSize()" style="background:#111; color:#fff; border:1px solid #333; padding:4px;">
                            <option value="12px">12px</option>
                            <option value="14px" selected>14px</option>
                            <option value="16px">16px</option>
                            <option value="18px">18px</option>
                        </select>
                    </label>
                    <label style="display:flex; gap:6px; align-items:center;">
                        <input id="wc-toolbar-check" type="checkbox" onchange="wcToggleToolbar()">
                        Toolbar
                    </label>
                    <label style="display:flex; gap:6px; align-items:center;">
                        <input id="wc-stats-check" type="checkbox" onchange="wcToggleStats()">
                        Stats
                    </label>
                    <label style="display:flex; gap:6px; align-items:center;">
                        <input id="wc-autoresize-check" type="checkbox" onchange="wcToggleAutoResize()">
                        Auto Resize
                    </label>
                </div>
                <overtype-editor
                    id="wc-editor"
                    value="# Web Component Demo\n\nThis demo showcases the **native** `<overtype-editor>` custom element with full functionality!\n\n## Features\n\n- **Real-time** markdown editing\n- *Live* preview updates\n- `Keyboard shortcuts` support\n- Multiple themes (Solar/Cave)\n- Built-in toolbar\n- Auto-resize capability\n- Event handling\n\n## Try These Features\n\n1. **Bold text** with Cmd/Ctrl + B\n2. *Italic text* with Cmd/Ctrl + I\n3. `Inline code` with Cmd/Ctrl + K\n4. [Links](https://github.com) work great!\n5. Create lists with Cmd/Ctrl + Shift + 8\n\n### Code Blocks\n\n```javascript\n// JavaScript code with syntax highlighting\nfunction greet(name) {\n    return `Hello, ${name}!`;\n}\n\nconsole.log(greet('OverType'));\n```\n\n### Blockquotes\n\n> This is a blockquote example.\n> It can span multiple lines\n> and looks great in the preview!\n\n---\n\n**Happy editing!** 🎉\n\n*The Web Component provides the same powerful features as the regular OverType editor, but as a native HTML element.*"
                    theme="solar"
                    height="300px"
                    toolbar
                    show-stats>
                </overtype-editor>
                <div id="wc-output" style="margin-top:10px; border:1px solid #333; padding:8px; background:#0f0f0f; font-size:12px; min-height:40px;">
                    Waiting for events...
                </div>
            </div>
        </div>
    </div>

    <!-- Theme Toggle -->
    <div id="themes" style="text-align: center; padding: 20px;">
        <button class="theme-toggle" id="custom-themes" onclick="toggleTheme()">
            Toggle Theme
        </button>
    </div>

    <script type="module">
        // Register custom element and set up minimal interaction
        import OverTypeEditor from './dist/overtype-webcomponent.esm.js';

        function wcGetValue() {
            const el = document.getElementById('wc-editor');
            if (el?.getValue) {
                alert(el.getValue().slice(0, 200));
            }
        }

        function wcUpdateContent() {
            const el = document.getElementById('wc-editor');
            if (!el) return;
            const content = `# Updated at: ${new Date().toLocaleTimeString()}\n\n**This content was updated programmatically.**`;
            if (el.setValue) el.setValue(content); else el.setAttribute('value', content);
        }

        function wcFocus() {
            const el = document.getElementById('wc-editor');
            el?.focus && el.focus();
        }

        function wcChangeTheme() {
            const sel = document.getElementById('wc-theme-select');
            const el = document.getElementById('wc-editor');
            el?.setAttribute('theme', sel.value);
            const Lib = window.OverType?.default || window.OverType;
            Lib?.setTheme && Lib.setTheme(sel.value);
        }

        function wcChangeHeight() {
            const sel = document.getElementById('wc-height-select');
            const el = document.getElementById('wc-editor');
            el?.setAttribute('height', sel.value);
        }

        function wcChangeFontSize() {
            const sel = document.getElementById('wc-fontsize-select');
            const el = document.getElementById('wc-editor');
            el?.setAttribute('font-size', sel.value);
        }

        function wcToggleToolbar() {
            const chk = document.getElementById('wc-toolbar-check');
            const el = document.getElementById('wc-editor');
            if (!el) return;
            if (chk.checked) el.setAttribute('toolbar', ''); else el.removeAttribute('toolbar');
        }

        function wcToggleStats() {
            const chk = document.getElementById('wc-stats-check');
            const el = document.getElementById('wc-editor');
            if (!el) return;
            if (chk.checked) el.setAttribute('show-stats', ''); else el.removeAttribute('show-stats');
        }

        function wcToggleAutoResize() {
            const chk = document.getElementById('wc-autoresize-check');
            const el = document.getElementById('wc-editor');
            if (!el) return;
            if (chk.checked) {
                el.setAttribute('auto-resize', '');
                el.removeAttribute('height');
            } else {
                el.removeAttribute('auto-resize');
                el.setAttribute('height', document.getElementById('wc-height-select').value || '300px');
            }
        }

        // Sync controls with Web Component initial state
        function syncControlsWithWc() {
            const el = document.getElementById('wc-editor');
            if (!el) return;
            
            // Sync theme selector
            const themeSelect = document.getElementById('wc-theme-select');
            const currentTheme = el.getAttribute('theme');
            if (themeSelect && currentTheme) {
                themeSelect.value = currentTheme;
            }
            
            // Sync height selector
            const heightSelect = document.getElementById('wc-height-select');
            const currentHeight = el.getAttribute('height');
            if (heightSelect && currentHeight) {
                heightSelect.value = currentHeight;
            }
            
            // Sync font-size selector
            const fontsizeSelect = document.getElementById('wc-fontsize-select');
            const currentFontSize = el.getAttribute('font-size');
            if (fontsizeSelect && currentFontSize) {
                fontsizeSelect.value = currentFontSize;
            }
            
            // Sync toolbar checkbox
            const toolbarCheck = document.getElementById('wc-toolbar-check');
            const hasToolbar = el.hasAttribute('toolbar');
            if (toolbarCheck) toolbarCheck.checked = hasToolbar;
            
            // Sync stats checkbox
            const statsCheck = document.getElementById('wc-stats-check');
            const hasStats = el.hasAttribute('show-stats');
            if (statsCheck) statsCheck.checked = hasStats;
            
            // Sync auto-resize checkbox
            const autoResizeCheck = document.getElementById('wc-autoresize-check');
            const hasAutoResize = el.hasAttribute('auto-resize');
            if (autoResizeCheck) autoResizeCheck.checked = hasAutoResize;
        }

        // Listen to WC events for live output
        function setupWcEvents() {
            const el = document.getElementById('wc-editor');
            const out = document.getElementById('wc-output');
            if (!el || !out) return;
            
            // Sync controls first
            syncControlsWithWc();
            
            el.addEventListener('ready', () => { out.textContent = 'Ready'; });
            el.addEventListener('change', (e) => {
                const stats = el.getStats?.();
                const chars = stats?.characters ?? e.detail?.value?.length ?? 0;
                out.innerHTML = `<strong>Changed</strong> · ${chars} chars · ${new Date().toLocaleTimeString()}`;
            });
            el.addEventListener('keydown', (e) => {
                out.innerHTML = `<strong>Key:</strong> ${e.detail?.event?.key || ''}`;
            });
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', setupWcEvents);
        } else {
            setupWcEvents();
        }

        // Expose to buttons in header
        window.wcGetValue = wcGetValue;
        window.wcUpdateContent = wcUpdateContent;
        window.wcFocus = wcFocus;
        window.wcChangeTheme = wcChangeTheme;
        window.wcChangeHeight = wcChangeHeight;
        window.wcChangeFontSize = wcChangeFontSize;
        window.wcToggleToolbar = wcToggleToolbar;
        window.wcToggleStats = wcToggleStats;
        window.wcToggleAutoResize = wcToggleAutoResize;
    </script>

    <script src="./dist/overtype.min.js"></script>
    <script>
        let editors = {};
        
        // Sample content for each editor
        const sampleContent = {
            main: `# Welcome to OverType

A **lightweight** markdown editor with perfect WYSIWYG alignment.

## Features
- 🚀 Lightning fast performance
- 🎨 Theme support
- ⌨️ Keyboard shortcuts
- 📱 Mobile optimized

Try typing some markdown!`,

            preview: `# Live Preview Demo

Watch as your **markdown** transforms in real-time!

## Links
Move your cursor into this link to see the tooltip:
[GitHub Repository](https://github.com/panphora/overtype)

## Code Support
Inline \`code\` and blocks:

\`\`\`javascript
const editor = new OverType('#editor');
\`\`\``,

            notes: `# Quick Notes

Use this space for:
- Todo lists
- Meeting notes
- Code snippets
- Draft content

> Tip: Use Tab to indent!`,

            code: `# Code Documentation

## Installation
\`\`\`bash
npm install overtype
\`\`\`

## Basic Usage
\`\`\`javascript
import OverType from 'overtype';

const editor = new OverType('#editor', {
  theme: 'cave',
  toolbar: true
});
\`\`\`

## API Methods
- \`getValue()\` - Get markdown content
- \`setValue(text)\` - Set content
- \`setTheme(name)\` - Change theme`
        };

        // Initialize all editors
        function initEditors() {
            const OT = window.OverType.default || window.OverType;
            
            // Set initial theme
            OT.setTheme('solar');
            
            // Main editor with toolbar
            [editors.main] = new OT('#main-editor', {
                value: sampleContent.main,
                showStats: true,
                toolbar: true
            });

            // Preview editor with toolbar
            [editors.preview] = new OT('#preview-editor', {
                value: sampleContent.preview,
                showStats: true,
                toolbar: true
            });

            // Notes editor
            [editors.notes] = new OT('#notes-editor', {
                value: sampleContent.notes,
                showStats: true
            });

            // Code editor
            [editors.code] = new OT('#code-editor', {
                value: sampleContent.code,
                fontSize: '13px',
                showStats: true
            });
        }

        // Toggle theme globally
        function toggleTheme() {
            const OT = window.OverType.default || window.OverType;
            const currentTheme = OT.currentTheme?.name || 'solar';
            const newTheme = currentTheme === 'solar' ? 'cave' : 'solar';
            OT.setTheme(newTheme);
            // Keep Web Component in sync
            const wc = document.getElementById('wc-editor');
            wc?.setAttribute('theme', newTheme);
            // Sync the selector control
            const sel = document.getElementById('wc-theme-select');
            if (sel) sel.value = newTheme;
        }

        // Sync preview with main
        function syncWithMain() {
            if (editors.main && editors.preview) {
                editors.preview.setValue(editors.main.getValue());
            }
        }

        // Initialize on load
        document.addEventListener('DOMContentLoaded', initEditors);
    </script>
</body>
</html>